<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-06-23 12:09:31
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-10-26 16:48:06
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group flex">
                        <label style="margin-right: 20px; margin-top: 5px;" for="model">编码名称*</label>
                        <input style="width: 180px;height: 35px;" name="model" #modelInput="ngModel" name="model" type="text"
                            class="form-control" [(ngModel)]="form.model" required maxlength="256" />
                        <validation-messages [formCtrl]="modelInput"></validation-messages>
                        <label style="margin-right: 20px; margin-top: 5px;margin-left: 100px;" for="model">作用模块*</label>
                        <p-dropdown name="useWhere" [options]="useWhereOptions" [(ngModel)]="form.useWhere" placeholder="请选择作用模块" required #useWhereInput="ngModel"  emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span style="vertical-align:middle; margin-left: .5em;width: 107px;">{{item.label}}</span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 107px;">{{model.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                        <validation-messages [formCtrl]="useWhereInput"></validation-messages>
                        <label style="margin-top: 5px;margin-left: 110px;" for="isUsed">是否启用 *</label>
                        <p-toggleButton name="isUsed" style="margin-left: 40px" [(ngModel)]="form.isUsed" onLabel="启用"
                            offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'150px'}">
                        </p-toggleButton>
                    </div>

                    <div class="form-group flex">
                        <label style="width: 30px;margin-right: 50px;margin-top: 5px;" for="stageSign">备注</label>
                        <input name="stageSign" #stageSignInput="ngModel" type="text" name="stageSign"
                            class="form-control" [(ngModel)]="form.stageSign" maxlength="256" />
                    </div>
                </div>
                <div class="modal-body">
                    <h4>自定义规则</h4>
                    <div>
                        <button pButton type="button" label="新增编码类型" (click)="addCoding()"></button>
                    </div>
                    <div *ngIf="coding.length != 0" class="box">
                        <div *ngFor="let item of coding ; let index=index">
                            <div class="coding-box">
                                <div class="coding-select">
                                    <p-dropdown name="{{index}}" [options]="codeOption"
                                        [(ngModel)]="coding[index].ruleKey" (onChange)="selectChange($event)">
                                        <ng-template let-select pTemplate="selectedItem">
                                            <span
                                                style="vertical-align:middle; margin-left: .5em;width: 178px;">{{select.label}}</span>
                                        </ng-template>
                                        <ng-template let-select pTemplate="select">
                                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                                <div style="font-size:14px;float:right;margin-top:4px;width: 178px;">
                                                    {{select.label}}</div>
                                            </div>
                                        </ng-template>
                                    </p-dropdown>
                                </div>
                                <div *ngIf="item.ruleKey == 0" style="display: flex; padding: 0px 10px;">
                                    <label style="margin-top: 5px;">常量值:</label>
                                    <input style=" width:135px;height: 35px;margin-left: 3px;"
                                        name="{{ index+index+index }}" #constantInput="ngModel" type="text"
                                        class="form-control" [(ngModel)]="item.ruleValue" />
                                </div>
                                <div *ngIf="item.ruleKey == 1" class="date-select">
                                    <label style="margin-top: 5px;margin-right: 3px;">格式:</label>
                                    <p-dropdown name="dateType" [options]="dateOption"
                                        [(ngModel)]="coding[index].ruleValue">
                                        <ng-template let-selected pTemplate="selected">
                                            <span
                                                style="vertical-align:middle; margin-left: .5em;width: 147px;">{{selected.label}}</span>
                                        </ng-template>
                                        <ng-template let-selected pTemplate="selecta">
                                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                                    {{selected.label}}</div>
                                            </div>
                                        </ng-template>
                                    </p-dropdown>
                                </div>
                                <div *ngIf="item.ruleKey == 2">
                                    <div>流水码制：十进制</div>
                                    <div style="display: flex;">
                                        <label style="margin-top: 5px;">长度:</label>
                                        <input style=" width:135px;height: 35px;margin-left: 20px;" id="serialLength"
                                            #constantInput="ngModel" name="constant" type="number" class="form-control"
                                            [(ngModel)]="item.serialLength" />
                                    </div>
                                    <div style="display: flex;">
                                        <label style="margin-top: 5px;">步长:</label>
                                        <input style=" width:135px;height: 35px;margin-left: 20px;" id="step"
                                            #constantInput="ngModel" name="step" type="number" class="form-control"
                                            [(ngModel)]="item.step" />
                                    </div>
                                    <div style="display: flex;">
                                        <label style="margin-top: 5px;">初始值:</label>
                                        <input style=" width:135px;height: 35px;margin-left: 7px;" id="startNum"
                                            #constantInput="ngModel" name="startNum" type="number" class="form-control"
                                            [(ngModel)]="item.startNum" />
                                    </div>
                                </div>
                                <div class="del-but">
                                    <button pButton type="button" label="删除" class="ui-button-danger"
                                        (click)="delCoding(index)"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" [disabled]="!bopForm.form.valid" class="btn btn-primary"><i
                            class="fa fa-save"></i> <span>保存</span></button>
                </div>
            </form>
        </div>
    </div>
</div>